技術筆記

今天改用繳交homework的方式來寫筆記，順便回應ㄧ下Akshay的影片，雖然是中文，他也看不懂XD但是是我的良心作業，等我成功找到工作有能力支持他時，再去留個感謝文，現在還是潛水按讚訂閱分享就好哈哈哈哈哈哈

什麼是Promise?

• 我的理解是當創造一個promise時，就創了一個空物件，所以promise就是一個被創造出來的物件，準備放之後非同步執行後所得的參數，一開始是undefined，當這個物件被放入參數後，就會自動觸發.then後面的函式發生，其被限制僅觸發一次
• promise三狀態
  • pending
  • fulfilled
  • rejected
• 來自MDN的定義

A Promise is an object representing the eventual completion or failure of an asynchronous operation.

Promise 是一個表示非同步運算的最終完成或失敗的物件。

為什麼要用Promise?

• 在剛開始學非同步會先接觸到callback，得知callback有其缺點，就是最為人所知的callback hell跟inversion of control
  • callback hell使得程式難讀更難維護，可以想像如果今天接了前人留下來的檔案，看到那ㄧ串通往地獄的階梯，當下會有多痛苦...
  • inversion of control 因為callback的執行就是把主控權當一個函式結束就從該函式傳遞給另一個函式，開發者無法得知目前狀態，也無法掌握函式到底被呼叫幾次
• 為拿回主控權，並寫出好讀易懂能輕鬆維護的非同步程式碼，會選擇以promise取代callback

Promise舉例

延續昨天Akshay講的例子

//callback hell
createOrder(cart, function (orderId) {
	proceedToPayment(orderId, function (paymentInfo) {
		showOrderList(paymentInfo, function () {
			updateWallet()
		})
	})
})

//改寫成promise 一般寫法
createOrder(cart)
	.then(function (orderId) {
		return proceedToPayment(orderId)
	})
	.then(function (paymentInfo) {
		return showOrderList(paymentInfo)
	})
	.then(function () {
		return updateWallet()
	})

//改寫成promise 箭頭函式寫法
createOrder(cart)
	.then(orderId => proceedToPayment(orderId))
	.then(paymentInfo => showOrderList(paymentInfo))
	.then(() => updateWallet())

心得

當一步一步從原始的callback改寫成promise後，可以開始感覺兩個語法的差別，主控權掌握在自己這邊，程式執行起來安心許多，另一方面，promise chain看起來比callback hell舒爽簡潔多了。
還有很重要的一點是promise is immutable， 一但成立即無法被改變。

參考資料

• Promises | Ep 02 Season 02 - Namaste JavaScript
• Using promises

童言童語

昨天早上我在po鐵人文時，完全不會打字的阿咖說他也想參加鐵人賽，疏不知他每天出場XD
剩沒幾天了，每天大放送好了，一天兩則XD

5歲樂咖+2歲嗨啾 = 我的神奇寶貝 皮咖啾

2021/05/07
阿咖某天早上鞋子穿錯邊，
我跟他說，
他回說：你讓我自己決定好嗎？

2021/03/19
阿咖看著丁丁藥局的DM說：我5歲要這個禮物！
我：媽媽不是跟你說過你要看你有的啊！你已經有很多玩具，很幸福了耶！
咖：我有超多玩具會更幸福啊！